import Taro, {Component} from '@tarojs/taro'
import {View, Image, Text} from '@tarojs/components'
import PropTypes from 'prop-types'
import {getRuntime} from '../utils/common'
import './Tabbar.less'
import './issue.less'

import tab_01 from '../assets/img/tab_01.png'
import tab_01_on from '../assets/img/tab_01_on.png'
import tab_02 from '../assets/img/tab_02.png'
import tab_02_on from '../assets/img/tab_02_on.png'
import tab_03 from '../assets/img/tab_03.png'
import tab_03_on from '../assets/img/tab_03_on.png'
import tab_04 from '../assets/img/tab_04.png'
import tab_04_on from '../assets/img/tab_04_on.png'
import tab_center from '../assets/img/tab_center.png'
import icon_19 from "../assets/img/icon_19.png";
import icon_20 from "../assets/img/icon_20.png";
import icon_21 from "../assets/img/icon_21.png";
import icon_22 from "../assets/img/icon_22.png";

class TabBar extends Component {
  constructor(props) {
    super(props)
  }

  state = {
    issueShow: false
  }

  componentWillMount(): void {
    /// console.log(this.props)
  }

  handelRouter(url: string = '/pages/index/index'): void {
    if(url === '/pages/user/index'){
      if(!getRuntime().getToken()) { getRuntime().navigateTo('/pages/login/login'); return }
    }
    getRuntime().navigateTo(url)
  }

  toggleShow () {
    if(!getRuntime().getToken()) { getRuntime().navigateTo('/pages/login/login'); return }
    this.setState({
      issueShow: !this.state.issueShow
    })
  }

  closeIssue (e) {
    e.stopImmediatePropagation()
    this.setState({
      issueShow: false
    })
  }

  openIssue (e) {
    e.stopPropagation()
    this.setState({
      issueShow: true
    })
  }

  render() {
    let currentTab = this.props.currentTab
    return (
      <View>
        <View className='tabbar'>
          <View className='tab' onClick={this.handelRouter.bind(this, '/pages/index/index')}>
            <Image className='tab-icon' src={currentTab === 'home' ? tab_01_on : tab_01}/>
            <View className='tab-title'>首页</View>
          </View>

          <View className='tab' onClick={this.handelRouter.bind(this, '/pages/dynamic/index')}>
            <Image className='tab-icon' src={currentTab === 'dynamic' ? tab_02_on : tab_02} />
            <View className='tab-title'>动态</View>
          </View>

          <View className='tab' onClick={this.toggleShow.bind(this)}>
            <Image className='tab-center' src={tab_center} />
          </View>

          <View className='tab' onClick={this.handelRouter.bind(this, '/pages/public_welfare/index')}>
            <Image className='tab-icon' src={currentTab === 'publicWelfare' ? tab_03_on : tab_03} />
            <View className='tab-title'>公益</View>
          </View>

          <View className='tab' onClick={this.handelRouter.bind(this, '/pages/user/index')}>
            <Image className='tab-icon' src={currentTab === 'user' ? tab_04_on : tab_04} />
            <View className='tab-title'>我的</View>
          </View>
        </View>
        <View className='tabbar-wrap' toggle={this.toggleShow.bind(this)}>
          <View className='footer-block' />
          <View className={this.state.issueShow ? 'issue-wrap issue-wrap-show' : 'issue-wrap'}
                onClick={this.closeIssue.bind(this)}>
            <View className='content' onClick={this.openIssue.bind(this)}>
              <View className='item' onClick={this.handelRouter.bind(this, '/pages/index/demand')}>
                <Image className='item-icon' src={icon_19}/>
                <Text className='item-title'>发布需求</Text>
              </View>
              <View className='item' onClick={this.handelRouter.bind(this, '/pages/index/services')}>
                <Image className='item-icon' src={icon_20}/>
                <Text className='item-title'>提供服务</Text>
              </View>
              <View className='item' onClick={this.handelRouter.bind(this, '/pages/index/position')}>
                <Image className='item-icon' src={icon_21}/>
                <Text className='item-title'>发布职位</Text>
              </View>
              <View className='item' onClick={this.handelRouter.bind(this, '/pages/index/rresume')}>
                <Image className='item-icon' src={icon_22}/>
                <Text className='item-title'>发布简历</Text>
              </View>
            </View>
          </View>
        </View>
      </View>
    )
  }
}

TabBar.propTypes = {
  currentTab: PropTypes.string
}

TabBar.defaultProps = {
  currentTab: 'home'
}

export default TabBar

